<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

        #app{width:500px;margin:50px auto;border:3px solid red;}
        .box{
           border:1px solid #ccc;
           padding:1em;
           margin:5px;
        }
    </style>
</head>
<body>
  
    <div id="app">
        <h3 class="title">v-model</h3>
        <div class="box">
            <!-- 1. 普通文本框  -->
            用户名：<input v-model="userName" >
        </div>

        <div class="box">
            <!-- 2. 单选  
            由value来决定用户选中的值 -->
            性别：
            <input type="radio" value="男" v-model="gender">帅哥
            <input type="radio" value="女" v-model="gender">美女
        </div>

        <div class="box">
            <!-- 3. 复选  
            由value来决定用户选中的值,结果放在一个数组中 -->
            爱好：
            <input type="checkbox" value="读书" v-model="hobby">读书
            <input type="checkbox" value="sport" v-model="hobby">运动
            <input type="checkbox" value="k歌" v-model="hobby">k歌
        </div>

        <div class="box">
            <!-- 4. 文本域  
            注： 不能把内容写在元素中: 
            <textarea v-model="info">abc</textarea>
        -->
            个人说明：<textarea v-model="info"></textarea>
        </div>

        <div class="box">
        <!-- 5. 下拉
           选中的值是以value为准
        -->
            位置： 
            <select  v-model="city">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">潜江</option>
            </select>
        </div>

        <div class="box">
            <!-- 6. 单个复选框（是否同意）
                如果为true,则选中，false,不选中
            -->
            愿意吗？<input type="checkbox" v-model="isChecked">
        </div>
        <button @click="hPrint">打印结果</button>
    </div>
    <script>
        // v-model 
        // 是用来对表单元素进行双向绑定的。
                // 1. 普通文本框 
                // 2. 单选
                // 3. 复选
                // 4. 文本域
                // 5. 下拉
                // 6. 单个复选框（是否同意）
        const vm = new Vue({
            el: "#app",
            data: {
                userName: '小王子',
                gender:'男',  // 单选
                hobby:['读书'], // 多选
                info: '自我介绍，如下：白玉谁家郎',
                city: 1,
                isChecked: false
            },
            methods: {
                hPrint () {
                    console.log( this.userName )
                    console.log( this.gender )
                    console.log( this.hobby )
                    console.log( this.info )
                    console.log( this.city )
                    console.log( this.isChecked )
                }
            }
            
        })
    </script>

</body>
</html>